import React, { useState } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators, Dispatch } from "redux"
import { MyState, ArticleItem } from "../../type/router"
import * as actions from "../../store/modules/action"
import "./Xiang.css"

interface PROPS {
  xiangList: ArticleItem[]
}
export const Detail = (props: PROPS) => {
  return (
    <div>
      <div className="main">
        <div className="left">
          {props.xiangList.length ? props.xiangList.map((item, index) => {
            return <div key={index}>
              <img className='img' src={item.img} alt="" />

              <div className='titlebox'>
                <div className='titlebox1'>
                  <h1 className='h1'> <b>{item.title}</b> </h1>
                  <p className='p1'>发布于{item.time}月前&emsp;阅读量为{item.look}&emsp;点赞数量{item.zan}</p>
                </div>
              </div>
              <div className='conbox'>
                <h2><a id="title2"></a> <b>{item.title}</b> </h2>
                <p className='word'> {item.con}</p>
                <h2> <a id="title3" ></a> <b>{item.con}</b> </h2>
                <p> {item.con}</p>
                <h2><a id="title4" ></a> <b>{item.con}</b> </h2>
                <p>{item.con}</p>
              </div>
            </div>
          }) : "暂无数据"}
        </div>
        <div className="rightdetail">
          {props.xiangList.length ? props.xiangList.map((item, index) => {
            return <div key={index}>
              <h1>目录</h1>
              <h3>{item.title}</h3>
            </div>
          }) : "无数据"}
        </div>
      </div>
    </div>
  )
}

const mapStateToProps = (state: MyState) => ({
  xiangList: state.xiangList
})

const mapDispatchToProps = (dispatch: Dispatch) => {
  return bindActionCreators(actions, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Detail)